<template>
    <view class="message-contain" :class="[showType == 0 ? 'self-message' : 'of-message']">
        <template v-for="(item,index) in infoSet" v-if="showType == 0">
            <text v-if="item.type == 'message'" :key="index">{{ item.message }}</text>
            <view v-else-if="item.type == 'image' && item.message.length" style="margin-bottom: 10upx">
                <template v-for="itemChild in item.message">
                    <view v-if="itemChild.name.includes('.doc') || itemChild.name.includes('.docx')"
                          style="display: flex;align-items: center;margin-right: 20upx">
                        <image src="/static/docx.png" style="width: 40upx;height: 40upx"></image>
                        <text style="margin-left: 20upx;flex: 1;overflow-wrap: break-word;
white-space:pre-wrap">{{ itemChild.name }}
                        </text>
                    </view>
                    <view v-else-if="itemChild.name.includes('.pdf')"
                          style="display: flex;align-items: center;margin-right: 20upx">
                        <image src="/static/pdf.png" style="width: 40upx;height: 40upx"></image>
                        <text style="margin-left: 20upx;flex: 1;overflow-wrap: break-word;">{{ itemChild.name }}</text>
                    </view>
                    <view v-else
                          style="display: flex;align-items: center;margin-right: 20upx">
                        <image src="/static/tupian.png" style="width: 40upx;height: 40upx"></image>
                        <text style="margin-left: 20upx;flex: 1;overflow-wrap: break-word;">{{ item.name }}</text>
                    </view>
                </template>
            </view>
        </template>
        <!--        v-for="(item,index) in infoSet"-->
        <template v-else>
            <!--            <text v-html="item.message" v-if="item.type == 'message'" :key="index"></text>-->
            <text v-html="displayText"></text>

            <view v-if="infoSet[0].hasOwnProperty('fileSetArr') && infoSet[0].fileSetArr.length && startEnd">
                <template v-for="(setChild,ind) in infoSet[0].fileSetArr">
                    <view v-if="setChild.name.includes('.doc') || setChild.name.includes('.docx')"
                          style="display: flex;align-items: center;box-sizing: content-box;margin-bottom: 20upx"
                          @click="viewDoc(setChild)" :key="ind">
                        <view style="width: 40upx;height: 40upx;">
                            <image src="/static/docx.png" style="width: 40upx;height: 40upx" mode="scaleToFill"></image>
                        </view>
                        <text style="margin-left: 20upx;flex: 1;overflow-wrap: break-word;
white-space:pre-wrap;overflow: hidden">{{ setChild.name }}
                        </text>
                    </view>
                    <view v-else-if="setChild.name.includes('.pdf')"
                          style="display: flex;align-items: center;margin-bottom: 20upx" :key="ind"
                          @click="viewDoc(setChild)">
                        <view style="width: 40upx;height: 40upx;">
                            <image src="/static/pdf.png" style="width: 40upx;height: 40upx"></image>
                        </view>
                        <text style="margin-left: 20upx;flex:1;overflow-wrap: break-word;
white-space:pre-wrap;overflow: hidden">{{ setChild.name }}
                        </text>
                    </view>
                    <view v-else
                          style="display: flex;align-items: center;margin-bottom: 20upx" :key="ind"
                          @click="viewDoc(setChild)">
                        <view style="width: 40upx;height: 40upx;">
                            <image src="/static/tupian.png" style="width: 40upx;height: 40upx"></image>
                        </view>
                        <text style="margin-left: 20upx;flex:1;overflow-wrap: break-word;
white-space:pre-wrap;overflow: hidden">{{ setChild.name }}
                        </text>
                    </view>
                </template>
            </view>
        </template>
    </view>
</template>

<script>
export default {
    name: "index",
    props: {
        showType: {
            type: String
        },
        infoSet: {
            type: Array
        },
        speed: {
            type: Number,
            default: 30
        }
    },
    watch: {
        'infoSet': {
            handler(newVal) {
                this.resetTypewriter()
                if (this.showType == 1) {
                    this.startTypewriter()
                } else {
                    this.displayText = newVal[0].message
                }
            },
            immediate: true,
        },
        'showType': {
            handler(newVal) {
                if (newVal == 1 && this.infoSet[0].message) {
                    this.resetTypewriter()
                    this.startTypewriter()
                } else {
                    this.resetTypewriter()
                    this.displayText = this.infoSet[0].message
                }
            }
        }
    },
    data() {
        return {
            displayText: '',
            timer: null,
            currentIndex: 0,
            startEnd: false,
        }
    },
    methods: {
        startTypewriter() {
            this.startEnd = false
            if (this.currentIndex < this.infoSet[0].message.length) {
                this.timer = setTimeout(() => {
                    this.displayText += this.infoSet[0].message.charAt(this.currentIndex)
                    this.currentIndex++
                    this.startTypewriter()
                }, this.speed)
            } else {
                this.startEnd = true // 牵扯到文件的话就用这个来控制
                this.$emit('speadEnd')
            }
        },
        resetTypewriter() {
            if (this.timer) {
                clearTimeout(this.timer)
                this.timer = null
            }
            this.displayText = ''
            this.currentIndex = 0
        },
        viewDoc(row) {
            console.log(row)
            uni.downloadFile({
                url: row.url,
                success: (res) => {
                    if (res.statusCode === 200) {
                        let a = document.createElement('a');
                        a.download = row.name;
                        a.href = res.tempFilePath;
                        document.body.appendChild(a);
                        a.click();
                        a.remove();
                    }
                },
                fail: (err) => {
                    uni.showToast({ icon: 'none', title: '下载失败，请重试' });
                }
            });
        }
    },
    beforeDestroy() {
        this.resetTypewriter()
    }
}
</script>

<style scoped lang="scss">
.message-contain {
  max-width: 674upx;
  min-height: 96upx;
  box-sizing: border-box;
  padding: 28upx 40upx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28upx;
  text-align: left;
  font-style: normal;
  border-radius: 48upx;
  margin-bottom: 28upx;
  line-height: 44upx;
}

.self-message {
  display: block;
  background: linear-gradient(90deg, #4D57F9 0%, #3798FF 100%);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 0;
}

.of-message {
  color: #1A1A1A;
  align-self: flex-start;
  background: linear-gradient(240deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0px 0px 6px 0px rgba(25, 140, 255, 0.25);
  border: 1px solid #FFFFFF;
  border-bottom-left-radius: 0;
}
</style>
